<template>
  <a-layout :style="{ height: '100vh' }">
    <a-layout-sider
      breakpoint="lg"
      collapsed-width="0"
      @collapse="onCollapse"
      @breakpoint="onBreakpoint"
    >
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" >
        <Menu></Menu>
      </a-menu>
    </a-layout-sider :style="{height:"100%"}">
      
    <a-layout >
      <Header></Header>
      <HeaderContext></HeaderContext>
      <a-layout-content :style="{ margin: '24px 16px 0' }">
        <div :style="{  background: '#fff', minHeight: '360px' }">
       
          <RouterView></RouterView>
        </div>
      </a-layout-content>
      <!-- <a-layout-footer style="text-align: center">

      </a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>
<script setup>
import { ref } from 'vue';
import Menu from './Menu.vue';
import HeaderContext from './HeaderContext.vue';
import Header  from './Header.vue';
import { RouterView } from 'vue-router';
const onCollapse = (collapsed, type) => {
  console.log(collapsed, type);
};
const onBreakpoint = broken => {
  console.log(broken);
};
const selectedKeys = ref(['4']);
</script>
<style scoped>

.a-layout-sider{
background-color: pink;

}
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout-sub-header-background {
  background: #141414;
}
</style>